<template>
  <div class="userIndex">
    <van-row @click="openUserLogin">
      <van-col span="6">
        <img :src="avatarSrc" alt="" />
      </van-col>
      <van-col span="10">{{nickName}}</van-col>
      <van-col span="8">
          <!-- 判断是否登录 -->
          <!-- van-icon 图标组件 -->
        <van-icon :name="ifLogined ? 'cross' : 'arrow'" @click="loginOut"/>
      </van-col>
    </van-row>

<!-- 通过 icon 属性设置格子内的图标，text 属性设置文字内容。 -->
    <van-grid square :column-num="3">
      <van-grid-item
        v-for="item in gridArr"
        :key="item.id"
        :icon="item.icon"
        :text="item.type"
        @click="itemClick"
      />
    </van-grid>
      <!-- 登录弹窗 -->
     <div class="login_modal" v-if="showModal">
      <section  @click="offUserLogin"></section>
      <van-form @submit="onSubmit">
        <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
          >提交</van-button>
      </div>
      <div class="form_bottom">没有账号,自动注册</div>  
    </van-form>
    </div>

  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  name: "user",
  data() {
    return {
      // 登录框的显示隐藏
      showModal: false,
      // 头像
      avatarSrc: require("@/assets/avatar.png"),

      username: '豆豆龙',
      password: '123456',

      nickName: '点击登录',
      // 是否登录
      ifLogined:false,
      // grid数组
      gridArr: [
        { id: 0, icon: "label-o", type: "我的订单" },
        { id: 1, icon: "bill-o", type: "优惠券" },
        { id: 2, icon: "goods-collect-o", type: "礼品卡" },
        { id: 3, icon: "star-o", type: "我的收藏" },
        { id: 4, icon: "flag-o", type: "我的足迹" },
        { id: 5, icon: "contact", type: "会员福利" },
        { id: 6, icon: "location-o", type: "地址管理" },
        { id: 7, icon: "warn-o", type: "账号安全" },
        { id: 8, icon: "service-o", type: "联系客服" },
        { id: 9, icon: "question-o", type: "帮助中心" },
        { id: 10, icon: "smile-comment-o", type: "意见反馈" },
      ],
    }
  },
   methods: {
    onSubmit(val) {
      console.log('submit', val);
      //  创建一个用户对象 和 token
        let usetInfo={"username":this.username,"userpaw":this.password,"avatarSrc":"http://localhost:8080/img/touxiang.e7050a88.jpg"}
        console.log(usetInfo);
        let token={"username":this.name,"userpaw":this.password}
        // 将用户对象转化为JSON字符串,
        let newusetInfo=JSON.stringify(usetInfo);
         //将用户对象到本地
        localStorage.setItem('userInfo',newusetInfo);
        localStorage.setItem('userToken',token);
        // 修改用户头像
        this.avatarSrc=require("@/assets/touxiang.jpg");
        // 修改用户名称
        this.nickName=usetInfo.username;
        // 设置用户登录状态
        this.ifLogined = true
        // 关闭模态框
        setTimeout(() => {
          this.offUserLogin()
        }, 1000)
    },
    // 弹出登录框
    openUserLogin() {

      // if (this.ifLogined) {
        let token = localStorage.getItem('userToken')
      if (!token) {
        this.showModal = true
      }
    },
    // 关闭登录框
    offUserLogin() {
      this.showModal = false
    },
    // 退出登录
    loginOut() {
      if(this.ifLogined){
      Dialog.confirm({
            title: "退出账号确认",
            message: "您是否想要退出当前账号？",
          })
          .then(() => {
            // 清除token
            localStorage.removeItem('userToken')
            // 刷新当前页面
            this.$router.go(0)
          })
      }
    },
    itemClick() {
      if (this.ifLogined) {
        this.$toast('该功能玩命开发中')
      } else {
        this.$toast('您还未登录')
      }
      
    },
    
  },
  created() {
    // 每次进入user页面，就直接判断有没有token，如果有就获取userInfo来渲染头像和昵称
    let token = localStorage.getItem('userToken')
    if (token) {
      let userInfo = localStorage.getItem('userInfo')
      // 将json字符串转化为字符串
      let newUserInfo = JSON.parse(userInfo)
      console.log("重新渲染用户对象",newUserInfo);
      this.avatarSrc = newUserInfo.avatarSrc
      this.nickName = newUserInfo.username
      this.ifLogined = true
    }
  }
}
</script>

<style lang="less" scoped>
.userIndex{
    font-size: .14rem;
    min-width: 320px;
    max-width: 800px;
    margin: 0 auto!important;
    line-height: 1;
}
.van-row {
  padding: 0.2rem 4%;
  background-color: #333;
  // background: #410303;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.15rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}

// 弹出框
.login_modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  section {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .van-form {
    width: 90%;
    height: 205px;
    position: absolute;
    top: 35vh;
    left: 50%;
    margin-left: -45%;
    padding: .1rem;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 3%;
    .van-button {
      background-color: darkred;
      border: 0;
    }
  }
}
.form_bottom {
  text-align: center;
  color: #ccc;
}

</style>